<!--
 * @Author: 袁锐城
 * @Date: 2024-06-05 15:14:45
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-06-07 10:50:43
 * @Description: 
-->
<template>
    <div id="siderNav_box">
        <div class="logo">
            <img src="@/assets/dash_img/JIN.png" alt="">
        </div>
        <el-menu class="el_menu_custom">
            <el-menu-item v-for="item in siderNavData" :key="item.name" :class="['router_link_custom',{'active_link':item.svgName==activeNav}]" text-color="#7D8592" @click="clickNavItem(item.svgName)">
                <router-link :to="item.path">
                    <svg-icon :icon="item.svgName" width="24" height="24" :color="item.svgName==activeNav?activeColor:defaultColor" class="iconClass"></svg-icon>
                    {{ item.name }}
                </router-link>
            </el-menu-item>
        </el-menu>
        <div class="support_box">
            <svg-icon icon="support" width="139" height="124" class="svgIcon"></svg-icon>
            <div class="support_btn" @click="clikShowSupport">
                <svg-icon icon="communiaction" width="24" height="24" style="margin-left: 16px;margin-right: 7px;"></svg-icon>
                <div>在线支持</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'siderNav',    
        data(){
            return{
                siderNavData:[
                    {
                        path:'/dashboard',
                        name:'仪表盘',
                        svgName:'dashboard'
                    },
                    {
                        path:'/project',
                        name:'项目',
                        svgName:'project'

                    },
                    {
                        path:'/calendar',
                        name:'日历',
                        svgName:'calendar'

                    },
                    {
                        path:'/holiday',
                        name:'假期',
                        svgName:'holiday'

                    },
                    {
                        path:'/employee',
                        name:'雇员',
                        svgName:'employee'

                    },
                    {
                        path:'/message',
                        name:'消息',
                        svgName:'message'

                    },
                    {
                        path:'/portal',
                        name:'门户网站',                        svgName:'portal'

                    },
                ],
                defaultColor:'#7D8592',
                activeColor:'#3F8CFF',
                activeNav:'dashboard'
            }
        },
        methods:{
            clickNavItem(item){
                this.activeNav=item
            },
            clikShowSupport(){
                this.$store.dispatch('common/setIsShowSupport')
            }
        }
    }
</script>

<style lang="scss" scoped>
#siderNav_box{
    width: 100%;
    height: 100%;
    .logo{
        width: 50px;
        height: 50px;
        background-color: #3F8CFF;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        margin-left: 24px;
        margin-top: 40px;
        margin-bottom: 42px;
        img{
            width: 34px;
            height: 19px;
        }
    }
    .el_menu_custom{
        width: 184px;
        margin-left: 16px;
        .router_link_custom{
            width: 184px;
            height: 44px;
            text-decoration: none;
            padding:0 !important;
            margin:0 !important;
            display: flex;
            align-items: center;
            justify-content: start;
            margin-bottom: 20px !important;
            transition: all 0.1s ease-in;
        }
        .active_link{
            border-right: 4px solid #3F8CFF;
            a{
                color:#3F8CFF;
                background: #ebf3ff;
            }
        }
        .router-link-active {
            text-decoration: none;
        }
        a{
            display: inline-block;
            width: 172px;
            height: 100%;
            text-decoration: none;
            line-height: 44px;
            font-size: 16px;
            color: rgba(125, 133, 146, 1);
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: start;
            border-radius: 10px;
        }  
        .iconClass{
            margin-left: 9px;
            margin-right: 16px;
        }
    }
    .support_box{
        width: 168px;
        height: 168px;
        border-radius: 24px;
        background: rgba(63, 140, 255, 0.1);
        margin-left: 16px;
        margin-top: 440px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        cursor: pointer;
        .svgIcon{
            margin-top:-60px;
        }
        .support_btn{
            width: 129px;
            height: 48px;
            opacity: 1;
            border-radius: 14px;
            background: rgba(63, 140, 255, 1);
            box-shadow: 0px 6px 12px  rgba(63, 140, 255, 0.26);
            font-size: 16px;
            line-height: 48px;
            color:#fff;
            display: flex;
            align-items: center;
            justify-content: start;
            margin-top: 28px;
        }
    }
}

</style>